<!DOCTYPE html>
<html th:lang="${#locale.toString()}" th:lang-direction="#{language.direction}" xmlns:th="http://www.thymeleaf.org">


<th:block th:insert="~{fragments/common :: head(title=#{compare.title})}"></th:block>


<body>
    <div id="page-container">
        <div id="content-wrap">
            <div th:insert="~{fragments/navbar.html :: navbar}"></div>
            <br> <br>
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-md-9">
                        <h2 th:text="#{compare.header}"></h2>
                         
                        <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf', remoteCall='false')}"></div>
                        <div th:replace="~{fragments/common :: fileSelector(name='fileInput2', multiple=false, accept='application/pdf', remoteCall='false')}"></div>
                        <button class="btn btn-primary"  onclick="comparePDFs()" th:text="#{compare.submit}"></button>

            
                        <div class="row">
                            <div class="col-md-6">
                                <h3 th:text="#{compare.document.1}"></h3>
                                <div id="result1" class="result-column"></div>
                            </div>
                            <div class="col-md-6">
                                <h3 th:text="#{compare.document.2}"></h3>
                                <div id="result2" class="result-column"></div>
                            </div>
                        </div>
                        <style>
                            .result-column {
                                border: 1px solid #ccc;
                                padding: 15px;
                                overflow-y: auto;
                                height: calc(100vh - 400px);
                                white-space: pre-wrap;
                            }
                        </style>
                        <script>
                        // get the elements
                        var result1 = document.getElementById('result1');
                        var result2 = document.getElementById('result2');

                        // add event listeners
                        result1.addEventListener('scroll', function() {
                            result2.scrollTop = result1.scrollTop;
                        });

                        result2.addEventListener('scroll', function() {
                            result1.scrollTop = result2.scrollTop;
                        });
                        
                        async function comparePDFs() {
                            const file1 = document.getElementById("fileInput-input").files[0];
                            const file2 = document.getElementById("fileInput2-input").files[0];

                            if (!file1 || !file2) {
                                console.error("Please select two PDF files to compare");
                                return;
                            }
                            pdfjsLib.GlobalWorkerOptions.workerSrc = 'pdfjs/pdf.worker.js'
                            const [pdf1, pdf2] = await Promise.all([
                                pdfjsLib.getDocument(URL.createObjectURL(file1)).promise,
                                pdfjsLib.getDocument(URL.createObjectURL(file2)).promise
                            ]);

                            const extractText = async (pdf) => {
                                const pages = [];
                                for (let i = 1; i <= pdf.numPages; i++) {
                                    const page = await pdf.getPage(i);
                                    const content = await page.getTextContent();
                                    const strings = content.items.map(item => item.str);
                                    pages.push(strings.join(" "));
                                }
                                return pages.join(" ");
                            };

                            const [text1, text2] = await Promise.all([
                                extractText(pdf1),
                                extractText(pdf2)
                            ]);

                            if (text1.trim() === "" || text2.trim() === "") {
                                alert("One or both of the selected PDFs have no text content. Please choose PDFs with text for comparison.");
                                return;
                            }
                            const diff = (text1, text2) => {
                                const words1 = text1.split(' ');
                                const words2 = text2.split(' ');

                                // Create a 2D array to hold our "matrix"
                                const matrix = Array(words1.length + 1).fill(null).map(() => Array(words2.length + 1).fill(0));

                                // Perform standard LCS algorithm
                                for (let i = 1; i <= words1.length; i++) {
                                    for (let j = 1; j <= words2.length; j++) {
                                        if (words1[i - 1] === words2[j - 1]) {
                                            matrix[i][j] = matrix[i - 1][j - 1] + 1;
                                        } else {
                                            matrix[i][j] = Math.max(matrix[i][j - 1], matrix[i - 1][j]);
                                        }
                                    }
                                }

                                let i = words1.length;
                                let j = words2.length;
                                const differences = [];

                                // Backtrack through the matrix to create the diff
                                while (i > 0 || j > 0) {
                                    if (i > 0 && j > 0 && words1[i - 1] === words2[j - 1]) {
                                        differences.unshift(['black', words1[i - 1]]);
                                        i--;
                                        j--;
                                    } else if (j > 0 && (i === 0 || matrix[i][j - 1] >= matrix[i - 1][j])) {
                                        differences.unshift(['green', words2[j - 1]]);
                                        j--;
                                    } else if (i > 0 && (j === 0 || matrix[i][j - 1] < matrix[i - 1][j])) {
                                        differences.unshift(['red', words1[i - 1]]);
                                        i--;
                                    }
                                }

                                return differences;
                            };


                            const differences = diff(text1, text2);

                            const displayDifferences = (differences) => {
                                const resultDiv1 = document.getElementById("result1");
                                const resultDiv2 = document.getElementById("result2");
                                resultDiv1.innerHTML = "";
                                resultDiv2.innerHTML = "";

                                differences.forEach(([color, word]) => {
                                    const span1 = document.createElement("span");
                                    const span2 = document.createElement("span");

                                    // If it's an addition, show it in green in the second document and transparent in the first
                                    if (color === "green") {
                                        span1.style.color = "transparent";
                                        span1.style.userSelect = "none";
                                        span2.style.color = color;
                                    } 
                                    // If it's a deletion, show it in red in the first document and transparent in the second
                                    else if (color === "red") {
                                        span1.style.color = color;
                                        span2.style.color = "transparent";
                                        span2.style.userSelect = "none";
                                    } 
                                    // If it's unchanged, show it in black in both
                                    else {
                                        span1.style.color = color;
                                        span2.style.color = color;
                                    }

                                    span1.textContent = word;
                                    span2.textContent = word;
                                    resultDiv1.appendChild(span1);
                                    resultDiv2.appendChild(span2);

                                    // Add space after each word, or a new line if the word ends with a full stop
                                    const spaceOrNewline1 = document.createElement("span");
                                    const spaceOrNewline2 = document.createElement("span");
                                    if (word.endsWith(".")) {
                                        spaceOrNewline1.innerHTML = "<br>";
                                        spaceOrNewline2.innerHTML = "<br>";
                                    } else {
                                        spaceOrNewline1.textContent = " ";
                                        spaceOrNewline2.textContent = " ";
                                    }
                                    resultDiv1.appendChild(spaceOrNewline1);
                                    resultDiv2.appendChild(spaceOrNewline2);
                                });
                            };

                            console.log('Differences:', differences);
                            displayDifferences(differences);
                        }
                        </script>
                    </div>
                </div>
            </div>
        </div>
        <div th:insert="~{fragments/footer.html :: footer}"></div>
    </div>